<template>
  <commonBox title="耗材列表" width="1100px">
    <div class="supplies-container">
      <div class="search-content">
        <el-button @click="clearSearch">清空筛选</el-button>
        <el-button @click="handleSY(0)" :class="{ selected: selected == 0 }"
          >查看剩余0个的耗材</el-button
        >
        <el-button
          @click="handleSY(1)"
          :class="{ selected: selected == 1 }"
          style="margin-right: 10px"
          >查看剩余1个的耗材</el-button
        >
        <el-input
          v-model="searchName"
          placeholder="请输入耗材名称"
          clearable
          style="width: 250px; margin-right: 10px"
          @clear="clearSearch"
        ></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
      <div class="list-header">
        <div class="header-item" v-for="item in title">{{ item }}</div>
      </div>
      <div class="item-container">
        <div
          class="item-list"
          v-for="item in showList"
          :class="{ warning: item.kc == 0 }"
        >
          <div class="department-item">{{ item.mc }}</div>
          <div class="department-item">{{ item.kc }}</div>
          <div class="department-item">{{ item.gg }}</div>
          <div class="department-item">{{ item.bz }}</div>
        </div>
      </div>
    </div>
  </commonBox>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getsuppliesList } from "@/api/index";
import { ElMessage } from "element-plus";
import commonBox from "@/components/commonBox.vue";
const title = ref(["耗材名称", "数量", "规格", "备注"]);
const zcList = ref([]);
const showList = ref([]);
const searchName = ref("");
const selected = ref("3");
function handleSearch() {
  if (!searchName.value) {
    ElMessage("请输入搜索条件或者点击清空");
    return;
  }
  selected.value = "3";
  showList.value = zcList.value.filter((item) => {
    return item.mc.includes(searchName.value);
  });
}
function clearSearch() {
  searchName.value = "";
  selected.value = "3";
  showList.value = zcList.value;
}
getsuppliesList({ page: 1, size: 100 }).then(({ data: res }) => {
  if (res.code == 0) {
    zcList.value = res.data.list;
    showList.value = res.data.list;
  }
});
function handleSY(num) {
  selected.value = num;
  showList.value = zcList.value.filter((item) => {
    return item.kc == num;
  });
}
</script>

<style scoped lang="less">
@import "@/styles/common.less";

.supplies-container {
  width: 100%;
  background: #ffffff;
  border-radius: 12px;

  .common-list();

  .search-content {
    .align-right();
  }
}
</style>
